<template>
  <header>
    <div class="return">
      <span class="iconfont iconzuojiantou"></span>
    </div>
    <div class="search">
      <span class="iconfont iconsearch"></span>
      输入城市/景点/游玩主题
    </div>
    <router-link to="/city">
      <div class="next">
        {{ cityName }}<span class="iconfont iconsanjiao_xia"></span>
      </div>
    </router-link>
  </header>
</template>
<script type="text/ecmascript-6">
  // 引入仓库
  import { mapState } from 'vuex'
  export default {
   computed:{
     ...mapState(['cityName'])
   }
  }
</script>
<style scoped lang="stylus">/*scoped:样式只作用于当前组件*/
  @import "~css/common.styl"
  header
    width: 100%
    line-height: .88rem
    background-color: $bgColor
    font-size: .28rem
    color:#ffffff
    display: flex
    .return
      width: .6rem
      text-align: center
      font-size: .36rem
    .search
      flex:1
      background-color: #fff
      height: .6rem
      line-height: .6rem
      margin-top: .14rem
      border-radius: .1rem
      color:#e4e7ea
      padding: 0 .2rem
    a
      color:#fff;
      .next
        padding: 0 .2rem
</style>
